﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Panel 标题面板</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
        
    <style>
    span.mini-tools-add
    {
        width:16px;height:16px;
        background:url(add.gif) no-repeat;
    }
    span.mini-tools-edit
    {
        width:16px;height:16px;
        background:url(edit.gif) no-repeat;
    }    
    span.mini-tools-remove
    {
        width:16px;height:16px;
        background:url(remove.gif) no-repeat;
    }        
    </style>    
</head>
<body>
    <h1>Panel 标题面板</h1>
    
<h4>可折叠</h4>
<div id="panel1" class="mini-panel" title="header" iconCls="icon-add" style="width:400px;height:200px;" 
    showToolbar="true" showCollapseButton="true" showFooter="true" allowResize="true" collapseOnTitleClick="true"
    
>
    <!--toolbar-->
    <div property="toolbar" >
        <input type='button' value='Toolbar' style='vertical-align:middle;'/>
    </div>
    <!--footer-->
    <div property="footer">
        <input type='button' value='Footer' style='vertical-align:middle;'/>
    </div>
    <!--body-->
    
    body<br />
    body
11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1


</div>


<h4>自定义按钮图标</h4>
    
<div class="mini-panel" title="header" iconCls="icon-add" style="width:400px;height:150px;"    
   buttons="close collapse add edit remove " onbuttonclick="onbuttonclick"
>
   
    
</div>

<h4>自定义按钮文本</h4>
<div id="p1" class="mini-panel" title="header" iconCls="icon-add" style="width:400px;height:150px;"    
   buttons="close collapse add edit remove " onbuttonclick="onbuttonclick"
>
   
    
</div>
    

    <script type="text/javascript">
        mini.parse();

        function onbuttonclick(e) {
            if (e.name == "add") {
                alert("add");
            }
            if (e.name == "edit") {
                alert("edit");
            }
            if (e.name == "remove") {
                alert("remove");
            }
        }

        var panel = mini.get("p1");
        panel.setButtons([{ html: '<a href="#" style="position:relative;top:-4px;">详细</a>' }]);
    </script>

    <div class="description">
        <h3>Description</h3>
        <p>            
        </p>
    </div>
</body>
</html>